<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表页</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
</head>
<body>
	<!-- 搜索 -->
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">ID</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="userId" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">用户账号</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="userPhone" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">用户性别</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="userSex" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">用户生日</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="userBirthday" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</div>
	</form>
	<!-- 搜索结束-->
	<!--添加的按钮  -->
	<input type="button" class="layui-btn" id="addBtn" value="添加" />
	<!-- 添加表单的弹窗 -->
	<form class="layui-form" action="" style="display: none" id="addForm">
		<div class="layui-form-item">
			<label class="layui-form-label">用户账号</label>
			<div class="layui-input-block">
				<input type="text" name="userPhone" required lay-verify="required"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户密码</label>
			<div class="layui-input-block">
				<input type="text" name="userPwd" required lay-verify="number"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<!-- <div class="layui-form-item">
				<label class="layui-form-label">用户图片地址</label>
				<div class="layui-input-inline">
					<input type="file" name="pictureFile" id="pictureFileAdd"
						placeholder="请选择" autocomplete="off" class="layui-input">
					<input type="text" name="userUrl" id="imgUrlAdd">
					隐藏域，为了提交时存图片的地址
					<img src="" id="imgShowAdd" />
					图片展示
				</div>
			</div>  -->
		<div class="layui-form-item">
			<label class="layui-form-label">用户性别</label>
			<div class="layui-input-block">
				<input type="text" name="userSex" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">用户生日</label>
			<div class="layui-input-block">
				<input type="text" name="userBirthday" id="time1" required
					lay-verify="required" placeholder="请输入标题" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="addformDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<!-- 添加的表单结束 -->

	<!--修改表单的弹窗 -->
	<form class="layui-form" action="" style="display: none"
		id="updateForm" lay-filter="updateForm">
		<div class="layui-form-item">
			<label class="layui-form-label">用户id</label>
			<div class="layui-input-block">
				<input type="text" name="userId" required lay-verify="required"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户账号</label>
			<div class="layui-input-block">
				<input type="text" name="userPhone" required lay-verify="required"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户密码</label>
			<div class="layui-input-block">
				<input type="text" name="userPwd" required lay-verify="number"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>
		<!-- <div class="layui-form-item">
				<label class="layui-form-label">用户图片地址</label>
				<div class="layui-input-inline">
					<input type="file" name="pictureFile" id="pictureFileUpdate"
						placeholder="请选择" autocomplete="off" class="layui-input">
					<input type="text" name="userUrl" id="imgUrlUpdate">
					隐藏域，为了提交时存图片的地址
					<img src="" id="imgShowUpdate" />
					图片展示
				</div>
			</div> --> 
		<div class="layui-form-item">
			<label class="layui-form-label">用户性别</label>
			<div class="layui-input-block">
				<input type="text" name="userSex" required lay-verify="required"
					placeholder="请输入标题" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">用户生日</label>
			<div class="layui-input-block">
				<input type="text" name="userBirthday" id="time2" required
					lay-verify="required" placeholder="请输入标题" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="updateformDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<!-- 修改的表单结束 -->
	<!-- 表格容器 -->
	<table id="demo" lay-filter="test"></table>
	<!-- 工具条的模板： -->
	<script type="text/html" id="barDemo">
  	<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
  	<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
	</script>
	<script>
		layui.use([ 'table', 'form', 'laydate','upload' ], function() {
			var table = layui.table;
			var form = layui.form;
			var $ = layui.$;
			var laydate = layui.laydate;
			var upload = layui.upload;
			//添加表单的单击事件
			$("#addBtn").click(function() {
				layer.open({
					type : 1,
					content : $('#addForm')
				//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
				});
			});

			//第一个实例
			table.render({
				elem : '#demo',
				url : 'getAllList', //数据接口
				id : 'idTest',
				page : true,//开启分页
				cols : [ [ //表头
				{
					field : 'userId',
					title : '用户id',
					width : 100,
					sort : true,
					fixed : 'left'
				}, {
					field : 'userPhone',
					title : '用户账号',
					width : 200
				}, {
					field : 'userPwd',
					title : '用户密码',
					width : 200,
					sort : true
				}, {
					field : 'userSex',
					title : '用户性别',
					width : 200
				}, {
					field : 'userBirthday',
					title : '用户生日',
					width : 200,
					sort : true
				}, {
					toolbar : '#barDemo'
				} ] ]
			});
			//图片上传的代码--添加
			upload.render({
				elem : '#pictureFileAdd', //指定选择文件的容器
				url : 'imgUpload', //服务端的地址
				method : 'post',// 类型
				done : function(res, index, upload) {
					console.log(res);
					if (res.code == 0) {
						var imgUrl = JSON.parse(res.data);
						lujing = imgUrl.src
						$("#imgUrlAdd").val(lujing); //设置隐藏域的值
						//$("#imgShowAdd").attr("src","../"+imgUrl.src); //设置图片展示
						$("#imgShowAdd").attr("src", "showPic/" + lujing); //设置图片展示
					}
				}
			});
			//图片上传的代码--修改
			upload.render({
				elem : '#pictureFileUpdate', //指定选择文件的容器
				url : 'imgUpload', //服务端的地址
				method : 'post',// 类型
				done : function(res, index, upload) {
					console.log(res);
					if (res.code == 0) {
						var imgUrl = JSON.parse(res.data);
						lujing = imgUrl.src
						$("#imgUrlUpdate").val(lujing); //设置隐藏域的值
						//$("#imgShowAdd").attr("src","../"+imgUrl.src); //设置图片展示
						$("#imgShowUpdate").attr("src", "showPic/" + lujing); //设置图片展示
					}
				}
			});
			//监听搜索栏
			//监听提交
			form.on('submit(formDemo)', function(data) {
				// layer.msg(JSON.stringify(data.field));
				table.reload('idTest', {
					where : data.field
				});
				return false;
			});
			//时间弹窗
			laydate.render({
				elem : '#time1',//指定元素
				type : 'date'
			});
			laydate.render({
				elem : '#time2',//指定元素
				type : 'date'
			});
			laydate.render({
				elem : '#time',//指定元素
				type : 'date'
			});
			//监听提交--添加
			form.on('submit(addformDemo)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				//向服务端发送请求
				$.post("insertUser", data.field, function(res) {
					if (res.code == "0") {
						layer.msg("成功", {
							time : 2000
						//成功提示弹出时间
						}, function() {
							layer.closeAll();//关闭所有的弹窗
							table.reload('idTest', {})//表格重载
						});
					}
				}, "json");
				return false;
			});//监听提交----添加 结束
			//监听提交---修改
			form.on('submit(updateformDemo)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				//向服务端发送请求
				$.post("updateUser", data.field, function(res) {
					if (res.code == "0") {
						layer.msg("成功", {
							time : 2000
						//成功提示弹出时间
						}, function() {
							layer.closeAll();//关闭所有的弹窗
							table.reload('idTest', {})//表格重载
						});
					}
				}, "json");
				return false;
			});//监听提交----修改 结束

			//监听工具条 
			table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if (layEvent === 'detail') { //查看
					//do somehing
				} else if (layEvent === 'del') { //删除
					layer.confirm('真的删除行么', function(index) {
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						//向服务端发送删除指令
						$.post("deleteUser", {
							id : data.id
						}, function(res) {
							if (res.code == "0") {
								layer.msg("成功", {
									time : 2000
								//成功提示弹出时间
								}, function() {
									layer.closeAll();//关闭所有的弹窗
									table.reload('idTest', {})//表格重载
								});
							}
						}, "json");
					});
				} else if (layEvent === 'edit') { //编辑
					//1.弹窗
					layer.open({
						type : 1,
						content : $('#updateForm'),
						area : [ '500px', '600px' ]
					});
					//2.回显数据
					form.val("updateForm", data);
					$("#imgShowUpdate").attr("src", "showPic/" + data.userUrl); //设置图片展示
				} else if (layEvent === 'LAYTABLE_TIPS') {
					layer.alert('Hi，头部工具栏扩展的右侧图标。');
				}
			});

		});
	</script>
</body>
</html>
